import { useState } from 'react'
import CodeArea from './components/code'
import './App.less'
import { Row, Col } from 'antd'
import Logo from './assets/logo.svg'
import { Image } from "antd";
import AntModal from './components/antModal'
function App() {
  const [open, setOpen] = useState(false)
  const onClose = () => {
    setOpen(false)
  }
  const openModal = () => {
    setOpen(true)
  }
  return (
    <>
      <Row>
        <Col xs={24} md={24}>
          <header className='header'>
            <span className='header-left'>
              <Image src={Logo} width={30} height={30}></Image>
              <span className='header-title'>Playground</span>
            </span>

          </header>
        </Col>
        <Col span={12}>
          <CodeArea /></Col>
        <Col span={12}>
          <div className='preview'>

            <div className='preview-area'> </div>
            <div className='preview-log'>

        
            </div>
          </div>
        </Col>
        <Col xs={24} md={24}>
          <footer className='footer'>
            <span className='footer-btn' onClick={openModal} >
              意见留言/bug反馈
            </span>
          </footer>
        </Col>
        <AntModal open={open} onClose={onClose} />
      </Row>

    </>
  )
}

export default App
